<html>
	<head>
		<link rel="stylesheet" type="text/css" href="fonts/HelveticaNeueBold/HelveticaNeueBold.css" />
		<link rel="stylesheet" type="text/css" href="controls.css" />
		<style>
		body{
			margin:0;
			padding:0;
			background-image:url('img-ele/back-mini.png');
		}
		#top{
			background-image:url('img-ele/top.png');
			background-size:100%;
			background-repeat:no-repeat;
			height:43px;
			text-align: center;
			font-family:"HelveticaNeueBold";
			font-size:2em;
			color:white;
			vertical-align:middle;
			padding-top:5px;
		}
		#left-side{
			float:left;
			
		}
		#right-side{
			width:400px;
			float:right;
		}
		#stt-avai,#stt-re,#stt-inse,#stt-clean{
			font-family:"HelveticaNeueBold";
			font-size:1.5em;
			cursor: hand;
			padding:5px;
			width:270px;
		}
		#stt-avai{
			color:#4f9325;
		}
		#stt-avai:hover{
			background:#94dc69;
		}
		#stt-re{
			color:#7e7e7e;
		}
		#stt-re:hover{
			background:#d3d3d3;
		}
		#stt-inse{
			color:#ff6464;
		}
		#stt-inse:hover{
			background:#ffadad;
		}
		#stt-clean{
			color:#5e93fe;
		}
		#stt-clean:hover{
			background:#a6c3ff;
		}
		</style>
		
	</head>
	<body>
		<script src="jquery-1.5.1.min.js"></script>
		<script src="jquery-ui-1.8.13.custom.min.js"></script>
		<div id="top">
			Tables
		</div>
		<div id="wrapper">
			<div id="left-side">
				<div class="table-blue">
					08
				</div>
				<div class="table-black">
					08
				</div>
				<div class="table-red">
					08
				</div>
				<div class="table-green">
					08
				</div>
			</div>
			<div id="right-side">
				<div class='pnl-simple'>
					<div>
						<div id="stt-avai">Available</div>
						<div id="stt-re">Reserved</div>
						<div id="stt-inse">In-served</div>
						<div id="stt-clean">Cleaning</div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>